<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:comp="http://java.sun.com/jsf/composite/register"
>
<h:head>
	<title>JSF 2.0 Hello World</title>
</h:head>
<ui:composition template="/templates/layout.xhtml">
	<ui:define name="content">
		<h3>Budget</h3>
		<hr />
		<h:form id="form">

			<p:growl id="messages" showDetail="true" />

			<p:contextMenu for="categories">
				<p:menuitem value="View" update=":view:viewCategoryPanel" icon="ui-icon-search" oncomplete="viewCategoryDialog.show()" />
				<p:menuitem value="Edit" update=":edit:editCategoryPanel" icon="ui-icon-search" oncomplete="editCategoryDialog.show()" />
				<p:menuitem value="Add" update=":add:addCategoryPanel" icon="ui-icon-search" oncomplete="addCategoryDialog.show()" />
				<p:menuitem value="Delete" actionListener="#{categoriesController.deleteCategory}" update="categories" icon="ui-icon-close" />
			</p:contextMenu>

			<p:treeTable value="#{categoriesController.root}" var="category" id="categories" selectionMode="single" selection="#{categoriesController.selectedNode}">

				<p:ajax event="expand" listener="#{categoriesController.onNodeExpand}" update=":form:messages" />
				<p:ajax event="collapse" listener="#{categoriesController.onNodeCollapse}" update=":form:messages" />
				<p:ajax event="select" listener="#{categoriesController.onNodeSelect}" update=":form:messages" />
				<p:ajax event="unselect" listener="#{categoriesController.onNodeUnselect}" update=":form:messages" />

				<f:facet name="header">Categories</f:facet>
				<f:facet name="header">
					<p:commandButton value="View" update=":view:viewCategoryPanel" icon="ui-icon-search" oncomplete="viewCategoryDialog.show()" />
				</f:facet>

				<p:column style="width:150px">
					<f:facet name="header">Name</f:facet>
					<h:outputText value="#{category.name}" />
				</p:column>
				
				<p:column style="width:20px">
					<f:facet name="header">Id</f:facet>
					<h:outputText value="#{category.id}" />
				</p:column>
				
				<p:column style="width:100px">
					<f:facet name="header">Description</f:facet>
					<h:outputText value="#{category.description}" />
				</p:column>
				
				<f:facet name="footer">
					<p:commandButton value="View" update=":view:viewCategoryPanel" icon="ui-icon-search" oncomplete="viewCategoryDialog.show()" />
				</f:facet>
				
			</p:treeTable>
			<br />
		</h:form>
		<h:form id="view">
			<p:dialog header="Category detail" showEffect="fade" widgetVar="viewCategoryDialog" modal="true">
				<p:outputPanel id="viewCategoryPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty categoriesController.selectedNode}">
						<h:outputLabel for="name" value="Name: " />
						<h:outputText id="name" value="#{categoriesController.selectedNode.data.name}" style="font-weight:bold" />
						<h:outputLabel for="description" value="Description: " />
						<h:outputText id="description" value="#{categoriesController.selectedNode.data.description}" style="font-weight:bold" />
						<h:outputLabel for="parent" value="Parent category: " />
						<h:outputText id="parent" value="#{categoriesController.selectedNode.data.parentCategory.name}" style="font-weight:bold" />
					</h:panelGrid>
					<p:commandButton value="Close" icon="ui-icon-cancel" oncomplete="viewCategoryDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form> 
		<h:form id="edit">
			<p:dialog header="Edit category" showEffect="fade" widgetVar="editCategoryDialog" modal="true">
				<p:outputPanel id="editCategoryPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty categoriesController.selectedNode}">
						<h:outputLabel for="name" value="Name: " />
						<h:inputText id="name" value="#{categoriesController.selectedNode.data.name}" style="font-weight:bold" />
						<h:outputLabel for="description" value="Description: " />
						<h:inputText id="description" value="#{categoriesController.selectedNode.data.description}" style="font-weight:bold" />
						<h:outputLabel for="parent" value="Parent category: " />
						<h:outputText id="parent" value="#{categoriesController.selectedNode.data.parentCategory.name}" style="font-weight:bold" />
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:categories" icon="ui-icon-save" actionListener="#{categoriesController.updateCategory}" oncomplete="editCategoryDialog.hide()" />
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="editCategoryDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		<h:form id="add">
			<p:dialog header="Add category" showEffect="fade" widgetVar="addCategoryDialog" modal="true">
				<p:outputPanel id="addCategoryPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty categoriesController.selectedNode}">
						<h:outputLabel for="name" value="Name: " />
						<h:inputText id="name" value="#{categoriesController.category.name}" style="font-weight:bold" />
						<h:outputLabel for="description" value="Description: " />
						<p:inputText id="description" value="#{categoriesController.category.description}" style="font-weight:bold" />
						<h:outputLabel for="parent" value="Parent category: " />
						<p:selectOneMenu id="parent" value="#{categoriesController.category.parentCategory.id}">
							<f:selectItem itemLabel="Select parent category" itemValue="" />
							<f:selectItems value="#{categoriesController.possibleParents}" />
						</p:selectOneMenu>
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:categories" icon="ui-icon-save" actionListener="#{categoriesController.saveCategory}" oncomplete="addCategoryDialog.hide()" />
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="addCategoryDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>
</html>
